<template>
	<view class="process-detail">
		<view class="process-item" :class="{
                    'past': processInfo.sighStatus === 1,
                    'active': processInfo.sighStatus === 0,
                    'normal': processInfo.sighStatus === -1
                }" v-for="(processInfo, idx) in processList" :key="idx">
			<view class="process-icon-box" :class="{
                    'past': processInfo.signStatus === 1,
                    'active': processInfo.signStatus === 0,
                    'normal': processInfo.signStatus === -1
                }"></view>
			<view class="process-content-box">
				<view class="process-time" v-if="processInfo.signTime">{{ processInfo.signTime }}</view>
				<view class="process-operate">
					<image class="process-icon" v-if="processInfo.icon" :src="hostApi+processInfo.icon" />
					<image class="process-icon" v-else src="@/static/images/icon/address-icon.png" />
					<view class="process-content">
						<view class="between-center">
							<view class="process-title">{{ processInfo.name }}</view>
							<view v-if="processInfo.btnName">
								<view class="center process-btn disabled" v-if="processInfo.signStatus==1">
									{{ processInfo.btnName }}
								</view>
								<view class="center process-btn " v-if="processInfo.signStatus==0">
									{{ processInfo.btnName }}
								</view>
								<view class="center process-btn disabled" v-if="processInfo.signStatus==-1">
									{{ processInfo.btnName }}
								</view>
							</view>
						</view>
						<view class="process-desc" v-if=" processInfo.departmentAddress">
							{{ processInfo.departmentAddress }}
							<!-- <text class="nav-link">院内导航</text> -->
							<view class="start-center">
								<image class="guidance-map-icon" src="/static/images/imgs/guidance-map-icon.png">
								</image>
								<view class="no-wrap">院内导航</view>
							</view>
						</view>
					</view>


				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			processList: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			...mapGetters(['userInfo', "hostApi"]),
		},
	}
</script>

<style lang="scss" scoped>
	.process-detail {
		margin: 10rpx 0;
		display: flex;
		flex-direction: column;
		gap: 32rpx;
	}

	.process-item {
		height: 160rpx;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 2rpx 4rpx 24rpx 0 rgba(0, 0, 0, 0.04);
		// padding: 24rpx 32rpx 24rpx;
		position: relative;
		margin-left: 80rpx;

		&.past {
			padding: 0 32rpx 12rpx;
		}
	}

	.process-item:not(:last-child)::before {
		content: '';
		position: absolute;
		left: -54rpx;
		top: 60%;
		height: calc(70%);
		width: 4rpx;
		background: #e0e0e0;
		transform: translateY(20%);
		z-index: 1;
	}

	.process-item.active:not(:last-child)::before {
		background: linear-gradient(#4ad6e5 0%, #e0e0e0 100%);
	}

	.process-item.past:not(:last-child)::before {
		background: #46aeb9;
	}

	.process-item.normal:not(:last-child)::before {
		background: #e0e0e0;
	}

	.process-operate {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.process-icon-box {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		// margin-right: 5px;
		position: absolute;
		left: -75rpx;
		top: 50%;
		transform: translateY(-50%);
		border: 16rpx solid #e0e0e0;
		box-sizing: border-box;
		z-index: 2;
	}

	.process-icon-box.active {
		background: #fff;
		border-color: #46aeb9;
	}

	.process-icon-box.past {
		background: #fff;
		border-color: #4ad6e5;
	}

	.process-icon-box.normal {
		background: #fff;
		border-color: #e0e0e0;
	}

	.process-content-box {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.process-time {
		font-size: 28rpx;
		color: #b3b3b3;
		padding: 0 10rpx 10rpx;
	}

	.process-icon {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background: #cffaff;
		padding: 12rpx;
		margin-right: 14rpx;
	}

	.process-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		justify-content: center;
	}

	.process-title {
		font-size: 30rpx;
		color: #222;
	}

	.process-desc {
		font-size: 26rpx;
		color: #888;
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.nav-link {
		color: #1ec6e6;
		font-size: 26rpx;
		margin-left: 8rpx;
		display: flex;
		align-items: center;
	}

	.process-btn {
		min-width: 120rpx;
		height: 48rpx;
		background: #f6fafd;
		color: #1ec6e6;
		border: 2rpx solid #1ec6e6;
		border-radius: 24rpx;
		font-size: 26rpx;
		margin-left: 24rpx;
		padding: 0 24rpx;
		outline: none;
		transition: background 0.2s;
	}

	.process-btn.disabled {
		color: #b3b3b3;
		border-color: #e0e0e0;
		background: #f6f6f6;
		pointer-events: none;
	}

	.guidance-map-icon {
		width: 18px;
		height: 18px;
	}
</style>